<template>
  <div class="personal-root">
    <van-nav-bar title="个人资料" left-arrow @click-left="$router.goBack()" />

    <div class="input-box flex-btw">
      <div class="title">头像</div>

      <van-uploader
        v-model="uploaderPositive"
        :after-read="afterRead"
        :before-read="beforeRead"
        :max-count="1"
        preview-size="50"
      />

      <!-- <van-image
        width="1rem"
        height="1rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      /> -->
    </div>

    <div class="input-box flex-btw">
      <div class="title">昵称</div>

      <van-field
        v-model="value"
        input-align="right"
        placeholder="请输入用户名"
      />
    </div>

    <div class="btn">确认修改</div>
  </div>
</template>

<script>
import * as imageConversion from "image-conversion";

export default {
  data() {
    return {
      value: "用户姓名",
      uploaderPositive: [],
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
    },
    beforeRead(file) {
      // 上传之前校验
      return new Promise((resolve, reject) => {
        // console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        console.log("压缩前", file);
        imageConversion.compressAccurately(file, 100).then((res) => {
          // console.log(res)
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          console.log("压缩后", res);
          resolve(res);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.personal-root {
  height: 100vh;
  background-color: #f5f5f5;
  .input-box {
    background-color: #fff;
    font-size: 0.26rem;
    height: 1.3rem;
    padding: 0.3rem;
    border-bottom: 0.01rem solid #f5f5f5;

    .title {
      min-width: 1rem;
      text-align: left;
    }
  }

  .btn {
    width: 5rem;
    height: 0.88rem;
    background-color: #2d7afe;
    font-size: 0.26rem;
    line-height: 0.88rem;
    color: #fff;
    border-radius: 0.1rem;
    margin: 0.3rem auto;
  }

  /deep/ .van-uploader {
    margin-top: 0.1rem;
    margin-right: -0.2rem;
  }
}
</style>
